<template>
  <div>
    <div class="profile-info">
      <div class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          姓名&nbsp;<span class="color-red">*</span>
        </div>
        <div class="profile-info-content paragraph-p2-light">{{ profile.username }}</div>
      </div>

      <div class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          电话号码&nbsp;<span class="color-red">*</span>
        </div>
        <div class="profile-info-content paragraph-p2-light">{{ profile.mobile }}</div>
      </div>

      <div class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          邮箱&nbsp;<span class="color-red">*</span>
        </div>
        <div class="profile-info-content paragraph-p2-light">{{ profile.mail }}</div>
      </div>

      <div class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          密码&nbsp;<span class="color-red">*</span>
        </div>
        <div class="profile-info-content paragraph-p2-light">{{ profile.password }}</div>
      </div>

      <div class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          系统头像
        </div>
        <div class="profile-info-content img-cycle-64">
          <img class="img-64-circle" :src="profile.avatar" alt=""/>
        </div>
      </div>

      <div v-if="$route.query.type" class="red-button div-align-justify-center" @click="userLogOut">
        <img class="icon-16" src="@/static/icon/16px_logout.png" alt="">
        <span class="paragraph-p2-light margin-left-4">退出登录</span>
      </div>
    </div>
  </div>
</template>
<script>
import UserAvatar from '@/static/images/profile/user-default.jpg'
import {getMyProfile, userLogOut} from "@/request/api";
import {Toast} from "vant";
export default {
  name: "ProfileInfo",
  components: {},
  data() {
    return {
      defaultAvatar: UserAvatar,
      ifShowDetail: true,
      profile: {
        id: this.$route.params.id,
        username: '',
        password: '',
        mobile: '',
        mail: '',
        avatar: '',
      },
    };
  },
  mounted() {
    this.getMyProfile()
  },
  methods: {
    getMyProfile() {
      getMyProfile({ pathParam: this.profile.id }).then(res => {
        const { State, Msg, Data } = res
        if (State) {
          const { name, email, phone_number, head_image_url } = Data
          this.profile.username = name
          this.profile.password = '••••••••'
          this.profile.mobile = phone_number
          this.profile.mail = email
          this.profile.avatar = head_image_url
        } else {
          Toast(Msg)
        }
      })
    },
    userLogOut() {
      userLogOut().then(res => {
        const { State } = res
        if (State) {
          this.$baseJS.logout()
          this.$router.push(this.GLOBAL.pathSetting.login.roleChoose)
        }
      })
    },
  },
};
</script>

<style scoped>
.profile-info {
  background: #E5E5E5;
  padding: 8px 16px;
  height: 725px;
}
.profile-info-div {
  padding: 12px 12px;
  background: #FFFFFF;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  margin-top: 8px;
}

.profile-info-title {
  height: 22px;
  color: #242424;
}

.profile-info-content {
  margin-top: 12px;
}

.img-cycle-64 {
  height: 64px;
  width: 64px;
  border-radius: 32px;
}

.red-button {
  margin-top: 120px;
  width: 90px;
  height: 22px;
  left: calc(50% - 76px/2 + 0.5px);
  padding: 32px 132px;
}
</style>
